<template>
    <div class="visul-container">
        <div class="bg-top">
            {{ title }}
        </div>
        <div class="visul-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VisuContent',
    data() {
        return {

        }
    },
    props: {
        title: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: ''
        },
        leftIcon: {
            type: Boolean,
            default: true
        },
        rightIcon: {
            type: Boolean,
            default: true
        },
    }
}
</script>

<style lang="less" scoped>
.visul-container {
    width: 100%;
    height: 100%;
    position: relative;
    .bg-top {
        width: 100%;
        height: 39px;
        background: url('../../assets/images/visual/title-bg.png');
        background-size: contain;
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: #D4F3FF;
        letter-spacing: 2px;
        text-align: left;
        font-style: normal;
        padding-left: 38px;
        line-height: 39px;
    }
    .visul-content {
        height: calc(100% - 39px);
        border: 1px solid;
        border-image: linear-gradient(5deg, rgba(135, 211, 255, 1), rgba(255, 255, 255, 0)) 1 1;
        background: rgba(35,105,185,0.2);
    }
}
</style>